import React, { Component, PropTypes } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import store from '../../store';

class RenamePreview extends Component{

    closeFrame(e){
        store.dispatch({
            type: 'RENAME_PREVIEW',
            renameFolder: false
        });
        $('.backcover').hide();
    }

    getTime(){
        var time = new Date();
        time = time.toISOString();
        time = time.substring(0,10);
        return time;
    }

    rename(e){
        var { previewList, activeFolder, activePreview } = this.props; 
        var _that = this;

        var previewName = this.refs.renameInput.value;
        if(!previewName || previewName === ''){
            store.dispatch({
                type: 'RENAME_PREVIEW_ERROR',
                renameError: '文件名不能为空！'
            })
            $('#rename-preview-error').show();
            return;
        }

        var _index = -1;
        var err = false;
        previewList.find((value, index, arr) => {
            if(value.secondnav === previewName && value.secondnav != activePreview){
                store.dispatch({
                    type: 'RENAME_PREVIEW_ERROR',
                    renameError: '文件名不能重名！'
                })
                $('#rename-preview-error').show();
                err = true;
                return;
            }
            if(value.secondnav === activePreview){
                _index = index;
            }
        });
        if(err)
        return;

        var _state = [];
        _state = previewList.map( p => p.secondnav === activePreview ? {...p, secondnav:previewName} : p);
        
        axios.get('/renamePreview', {
            params: {
                newName: previewName,
                oldName: activePreview,
                firstnav: activeFolder,
                time: _that.getTime()
            }
        })
        .then(function(response){
            console.log(_state);

            store.dispatch({
                type: 'GET_PREVIEW',
                previewList: _state
            })

            _that.closeFrame();
        })
        .catch(function(error){
            alert('系统出错！')
        })
        

    }

    clearnError(){
        $('#rename-preview-error').hide();
    }

    render(){

        var { renamePreview, activeFolder, renameError, activePreview } = this.props;
        var classs = 'new-container hide';
        if (renamePreview) classs = 'new-container'
       return(
            <section id="rename-preview" className={classs}>
                <div  className="new-title">
                    文件重命名
                    <i className="icon-remove" onClick={this.closeFrame.bind(this)}></i>
                </div>
                <div>
                    文件夹<span className="warn">{activeFolder}</span>下的<span className="warn">{activePreview}</span>文件
                </div>
                <div>
                    <input id="rename-preview-input" type="text" ref="renameInput" onFocus={this.clearnError.bind(this)}/>
                </div>
                <div id="rename-preview-error" className="error">{ renameError }</div>                
                <div>
                    <button type="button" className="cancle-btn" onClick={this.closeFrame.bind(this)}>取消</button>
                    <button type="button" className="delete-btn" onClick={this.rename.bind(this)}>确定</button>
                </div>
            </section>
       )
    }

}

const mapStateToProps  = (state) => {
    return {
        previewList: state.previewReducer.previewList,
        activeFolder: state.folderReducer.activeFolder,
        renamePreview: state.previewReducer.renamePreview,
        renameError: state.previewReducer.renameError,
        activePreview: state.previewReducer.activePreview,
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(RenamePreview);